<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
      <div class="pc-page-header">
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.dataNo" clearable class="pc-input3-col5" placeholder="输入编号"></el-input>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.title" clearable class="pc-input3-col6" placeholder="输入标题"></el-input>
        </el-form-item>
        <el-form-item  prop="id">
          <el-select v-model="dataQueryForm.subType" multiple  collapse-tags class="pc-input3-col6" placeholder="选择类型" value="">
            <el-option v-for="item in subTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker class="block"
                          v-model="dataQueryForm.publishTime"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="发布开始日期"
                          end-placeholder="发布结束日期"
                          value-format="yyyy-MM-dd"
                          @change="getDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('dataQueryForm')">刷新</el-button>
          <el-button type="primary" @click="viewEditNewsFn(getDefaultNewsInfo(), '发布新闻', '发布', 1)">发布新闻</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!--列表数据-->
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>

    <!--分页组件-->
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

    <!--新闻详情页面-->
    <pc-dialog :is-show="isShowDetailDialog" title='新闻详情' @on-close="isShowDetailDialog = false">
      <div>
        <detail :newsInfo="newsInfo">
        </detail>
      </div>
    </pc-dialog>

    <!--发布/编辑新闻页面-->
    <pc-dialog :is-show="isShowEditNewsDialog" :title='dialogTitle' @on-close="isShowEditNewsDialog = false">
      <div>
        <edit-news :newsInfo="newsInfo" :btnTitle="btnTitle" @sure="afterEditNews()">
        </edit-news>
      </div>
    </pc-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import {enums} from '../../../../utils/settings';
  import Detail from './detail.vue';
  import EditNews from './editNews.vue';
  let that;

  // 标题链接详情
  var titleLink = {
    template: ` <el-button class="base-news-no" @click="viewdetail(row)" type="text" size="small">{{this.row.title}}</el-button>`,
    props: ['row'],
    methods: {
      viewdetail(val) {
        this.$emit('view-detail', val);
      }
    }
  };

  // 操作按钮
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button type="primary" plain @click="gotoEditNews(row)">编辑</el-button>
        <el-button type="info"    plain @click="gotoDeleteNews(row)">删除</el-button>
      </div>`,
    props: ['row'],
    computed: {
    },
    methods: {
      // 跳转编辑新闻
      gotoEditNews (val) {
        this.$emit('edit-news', val);
      },
      // 跳转删除新闻
      gotoDeleteNews (val) {
        this.$emit('delete-news', val);
      }
    }
  };

  export default {
    data() {
      return {
        newsInfo: null,
        editType: '',
        dialogTitle: '',
        btnTitle: '',
        isShowDetailDialog: false,
        isShowEditNewsDialog: false,
        dataQueryForm: {
          mainType: 1,
          dataNo: null,
          title: null,
          subType: [],
          publishTime: null,
          startDate: null,
          endDate: null
        },
        tableData: [],
        columns: [
          {
            label: '编号',
            prop: 'dataNo'
          },
          {
            label: '标题',
            // prop: 'title'
            component: titleLink,
            listeners: {
              'view-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '类型',
            prop: 'subTypeDisplay'
          },
          {
            label: '发布时间',
            prop: 'publishTime'
          },
          {
            label: '最近更新时间',
            prop: 'lastEditTime'
          },
          {
            label: '操作人',
            prop: 'lastOperator'
          },
          {
            label: '操作',
            minWidth: 100,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'edit-news' (data) {
                that.viewEditNewsFn(data, '编辑新闻', '保存', enums.SK_NEWS_EDIT_TYPE.EDIT);
              },
              'delete-news' (data) {
                that.deleteNewsFn(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '编号': {minWidth: 100},
          '标题': {minWidth: 300},
          '类型': {minWidth: 100},
          '发布时间': {minWidth: 120},
          '操作人': {minWidth: 110},
          '最近更新时间': {minWidth: 120}
        },
        selecetedRows: [],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 140,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        subTypeOption: [
          {
            value: 11,
            label: '行情'
          }, {
            value: 12,
            label: '技术'
          }, {
            value: 13,
            label: '消费'
          }, {
            value: 14,
            label: '贸易'
          }, {
            value: 15,
            label: '专访'
          }, {
            value: 16,
            label: '投资并购'
          }, {
            value: 17,
            label: '公司'
          }, {
            value: 18,
            label: '政策'
          }
        ],
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/malisk/server/news/queryNewsReportList'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Detail, EditNews
    },
    created() {
      that = this;
    },

    methods: {
      getDate() {
        if (this.dataQueryForm.publishTime === null) {
          this.dataQueryForm.startDate = '';
          this.dataQueryForm.endDate = '';
        } else {
          this.dataQueryForm.startDate = this.dataQueryForm.publishTime[0];
          this.dataQueryForm.endDate = this.dataQueryForm.publishTime[1];
        }
      },
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      viewDetailFn (scopeRow) {
        this.newsInfo = scopeRow;
        this.isShowDetailDialog = true;
      },
      // 获取默认新闻新增信息
      getDefaultNewsInfo() {
        let defaultNewsInfo = {id: '', publishTime: ''};
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        var minute = date.getMinutes();
        minute = minute < 10 ? ('0' + minute) : minute;
        defaultNewsInfo.publishTime = y + '-' + m + '-' + d + ' ' + h + ':' + minute;
        return defaultNewsInfo;
      },
      viewEditNewsFn (scopeRow, dialogTitle, btnTitle, editType) {
        this.newsInfo = scopeRow;
        this.dialogTitle = dialogTitle;
        this.btnTitle = btnTitle;
        this.editType = editType;
        this.isShowEditNewsDialog = true;
      },
      deleteNewsFn (val) {
        // 调用后端接口
        this.ajaxBox({
          title: '操作确认',
          message: '确定要删除该新闻吗？',
          type: 'POST',
          url: '/malisk/server/news/deleteNewsReport',
          data: {
            id: val.id,
            version: val.version
          },
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.successTip('删除成功', 2000);
              this.$refs.pcPagination.queryListWithPageFn(false);
            } else {
              this.errorTip(res.message);
            }
          }
        });
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      afterEditNews() {
        this.isShowEditNewsDialog = false;
        if (this.editType === enums.SK_NEWS_EDIT_TYPE.ADD) {
          this.$refs.pcPagination.queryListWithPageFn(true);
        } else {
          this.$refs.pcPagination.queryListWithPageFn(false);
        }
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      },
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.dataQueryForm.mainType = 1;
        this.dataQueryForm.dataNo = null;
        this.dataQueryForm.title = null;
        this.dataQueryForm.subType = [];
        this.dataQueryForm.publishTime = null;
        this.dataQueryForm.startDate = null;
        this.dataQueryForm.endDate = null;
        this.queryDataFn();
      }
    }
  };
</script>
<style>
  .base-news-no {
    padding: 5px 0px !important;
  }
</style>
